<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta name="layout" content="main" />
	<title>Modificar Menu</title>
	<style type="text/css">
		#formSelectMenu {
			margin-bottom: 20px;
			width: 207px;
			border: 0.1em dashed red;
			border-radius: 5px;
			padding: 0 5px;
			padding-bottom: 8px; 
		}
		
		.campos {
			float: left;
			width: 400px;
			text-align: left;
		}
		
		#dialog {
			text-align: center;
		}
		
		#dialog input[type=submit] {
			margin-top: 10px;
		}
	</style>
	<script type="text/javascript">
		$(function() {
			$("#itens a").click(function(event) {
				event.preventDefault();
				$("#dialog").load($(this).attr('href'));
				$("#dialog").dialog({
					title: "Indicar Item",
					width: 320,
					height: 150,
					modal: true,
					resizable: false,
					draggable: false
				});
			});
		});
	</script>
</head>
<body>
	<h1>Modificar Menu</h1>
	<div id="formSelectMenu">
		<h3>Selecione um menu</h3>
		<g:form>
			<g:select from="${menus}" optionKey="id" name="menu" id="a"/>
			<g:actionSubmit value="Ok" action="modificar" />
		</g:form>
	</div>
	
	<g:if test="${menu != null}">
		<div id="camposMenu">
			<div class="campos">
				<h3>Nome:</h3>
				<p>${menu.nome}</p>
				
				<h3>Adicionar Item</h3>
				<g:form>
					<g:hiddenField name="menu" value="${menu.id}" />
					<g:select name="item" from="${itens}" optionKey="id" />
					<g:actionSubmit value="Adicionar Item" action="adicionarItem" />
				</g:form>
			</div>
			
			<div class="campos">
				<h3>Itens do menu</h3>
				<ul id="itens">
					<g:each in="${menu.itemIndicacao()}" var="item">
						<li><g:link controller="menu" action="indicacoesPossiveis" params="${[id: item.key.id, menu: menu.id]}">${item.key}</g:link></li>
					</g:each>
				</ul>
			</div>
		</div>
		<div id="dialog" class="invisivel"></div>
	</g:if>
</body>
</html>